<template>
    <p>refData:{{refData}}</p>
    <p>data:{{data.num}}</p>
    <div class="content">
        <div class="hello">Hello,Vue</div>
        <div class="box"></div>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <div class="box6"></div>
        <div class="box7"></div>
        <div class="box8"></div>
        <button @click="show = true">button</button>
        <Button v-if="show"></Button>
    </div>
</template>
<script lang="ts" setup>
import {reactive,ref,onMounted,defineAsyncComponent} from 'vue'
import { add } from '@/utils/test1'
import { addQ } from '@/utils/test2'
const Button = defineAsyncComponent(()=>import(/*webpackChunkName:'Button'*/ '@/components/Button.vue'))
const refData = ref<string>('abc')
const show = ref<boolean>(false)
const data = reactive<{num:number}>({
    num:3
})

onMounted(()=>{
    console.log(add(1,2))
    console.log(addQ(5,1))
})
</script>